function dataName() {
  let uname = localStorage.getItem('username')
  console.log(uname);

  const userBox = document.querySelector('.username')
  if (uname) {
    userBox.innerHTML = uname
  } else {
    userBox.innerHTML = ''
  }

}


async function getStudentData() {
  try {
    let token = localStorage.getItem('token')
    let res = await axios({
      url: '/dashboard',
      // headers: {
      //   Authorization: token
      // }
    })
    let { overview, year } = res.data.data
    for (key in overview) {
      document.querySelector(`.${key}`).innerHTML = overview[key]

    }
    renderLine(year)
    
  } catch (err) {

  }

}
getStudentData()

document.querySelector('#logout').addEventListener('click', async function () {
  let dialog = await pxmu.diaglog('您确定退出吗?')
  if (dialog.btn == 'right') {
    // 清除本地缓存
    localStorage.removeItem('token')
    localStorage.removeItem('username')
    // 跳转到页面
    location.href = './login.html'
  }
})

function renderLine(year) {
  let echars = echarts.init(document.querySelector('#line'))
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: year.map(item => item.month)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: year.map(item => item.salary),//[820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 5,
          // 颜色
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0, color: '#479dee' // 0% 处的颜色
            }, {
              offset: 1, color: '#5c75f0' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#b2d7f7' // 0% 处的颜色
            }, {
              offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }



        }
      }
    ]
  };
  echars.setOption(option)
}


// function renderSalary(salaryData) {
//   const dom = document.querySelector('#salary')
//   const myChart = echarts.init(dom)
//   option = {
//     title: {
//       text: '班级薪资分布',
//       left: 10,
//       top: 15
//     },
//     tooltip: {
//       trigger: 'item',
//     },
//     legend: {
//       top: '5%',
//       left: 'center'
//     },
//     series: [
//       {
//         name: '班级薪资分布',
//         type: 'pie',
//         radius: ['55%', '70%'],
//         // ,
//         avoidLabelOverlap: false,
//         itemStyle: {
//           borderRadius: 15,
//           borderColor: '#fff',
//           borderWidth: 2
//         },
//         label: {
//           show: false,
//           // position: 'center'
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 40,
//             fontWeight: 'bold'
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        
//         data: salaryData.map(item => {
//           return [{ value: item.g_count + item.b_count,name:item.label }]
//         })
//       }
//     ]

//   };
//   myChart.setOption(option)
// }

// async function getData() {
//   let res= await axios({
//     url:'/dashboard'
//   })
//   const { overview, year, salaryData, groupData, provinceData } = res.data
  
// }

// 渲染薪资分布函数
//班级薪资分布 数据图表渲染
function pieSalaryDistribution(salaryData) {
  const myChart = echarts.init(document.querySelector("#salary"));
  const option = {
    title: {
      text: "班级薪资分布",
      top: 15,
      left: 18,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "71%"],
        avoidLabelOverlap: false,
        padAngle: 2,
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          show: false,
          position: "center",
        },

        labelLine: {
          show: false,
        },
        data:salaryData.map((item) => {
          return { value: item.g_count + item.b_count, name: item.label };
        }),
      },
    ],
  };
  myChart.setOption(option);
}



let res =  axios({
  url: '/dashboard',
  // headers: {
  //   Authorization: token
  // }
}).then(res=>{
  console.log(res.data.data);
  pieSalaryDistribution(res.data.data.salaryData);
})

function renderGroupSalary(groupData){
  
}

